<template>
<div>
  <Table
    :table="table"
    :tableColumns="tableColumns"
    :loadTableList="loadTableList"
    :changePageSize="changePageSize"
    :changePage="changePage"
    :deleteMultipleSelectionUrl="$urls.API_URL_BACKSTAGE_SCHOOLCLASSROOM_MANAGE"
    :showDeleteButton="true"
    @addRow="addRow"
    @editRow="editRow"
  >
    <template #expired="scope">
      <!--            {{scope.row.expired}}-->
      <el-tag :type="`${scope.row.expired==0 ? 'info':scope.row.expired==1 ? 'success' : 'danger'}`">{{dictToMap(yesOrNoDict).get(scope.row.expired)}}</el-tag>
    </template>
  </Table>
</div>
</template>

<script lang="ts" setup>
// 导入表格组件
import Table from '@/components/base/table/Table.vue';

// 接收父组件传递过来的值
import { TableColumn, TableData } from '@/types/interface/base_interface';
import { defineProps, getCurrentInstance, ref } from 'vue';
import {
  yesOrNoDict, dictToMap, departmentTypeDict, Option, getDict,
} from '@/api/dict';
import { Role } from '@/types/interface/auth_interface';
import { SchoolClassRoom, SchoolGrade } from '@/types/interface/school_interface';
// 接收父组件的值
interface Props {// 需要在父组件引入自定义的@/api/uem/useTableList.ts组件，然后将其中的部分属性传过来
  table: TableData, // 表格对象，包含表格数据和分页信息。表格数据实际业务并不需要，偷懒写法
  loadTableList:()=>void, // 重新加载表格
  changePageSize:()=>void, // 当每页数据显示数发生变化时触发的一个函数
  changePage:()=>void, // 当页面发生变化时触发的一个函数
}
const props = defineProps<Props>();

const { proxy } = getCurrentInstance(); // 使用proxy代替ctx，因为ctx只在开发环境有效
// 初始化性别字典
const roomTypeDict:Option[] = await getDict('教室类型', 'number');
// 定义表格所有的列字段信息
const tableColumns = ref<TableColumn[]>([
  {
    label: '所属部门',
    prop: 'departmentId',
    type: 'dict',
    dict: departmentTypeDict,
    width: 200,
  },
  {
    label: '教室名称',
    prop: 'name',
    // width: 200,
    // fixed: true,
    width: 200,
  },
  {
    label: '教室地址',
    prop: 'address',
    // width: 200,
    // fixed: true,
    width: 200,
  },
  {
    label: '教室类型',
    prop: 'type',
    type: 'dict',
    dict: roomTypeDict,
    width: 200,
  },
  {
    label: '可容纳学生人数',
    prop: 'total',
    width: 200,
  },
  {
    label: '简介',
    prop: 'intro',
    width: 200,
  },
  {
    label: '教室是否能够使用',
    prop: 'expired',
    width: 100,
    type: 'custom',
  },
  {
    label: '创建时间',
    prop: 'createTime',
    width: 200,
    // fixed: true,
  },
  {
    label: '修改时间',
    prop: 'updateTime',
    width: 200,
    // fixed: true,
  },
]);

// 点击添加按钮，由父组件来决定实现方法
const addRow = () => {
  proxy.$emit('addRow', null);
};

// 编辑按钮操作
const editRow = (row:SchoolClassRoom):void => {
  proxy.$emit('editRow', row);
};

</script>

<style scoped>

</style>
